<template>
	<!--自定义文件上传接口，要配合安卓 ，主要用来解决前端多文件各种类型选择上传 -->
	<div class="file-uploader" @click="selectFile">
		<!-- 默认插槽，用于自定义自己的样式触发-->
		    <slot name="trigger" :selectFile="selectFile">
		      <!-- <button @click="selectFile" class="default-trigger-btn">选择文件</button> -->
		    </slot>
		<!-- loading -->
		<uv-loading-page :loading="uploading" loading-text="上传中..." font-size="24rpx"
			bgColor="rgba(0, 0, 0, 0.6)"></uv-loading-page>
	</div>
</template>

<script>
	import {
		getRequestUrl
	} from '@/utils/request.js'

	export default {
		props: {
			// 判断是那个接口业务过来的 比如ALL 是全委，DEPART是通知部门
			uploadType: {
				type: String,
				default: 'ALL'
			},
			businessId: {
				type: [String, Number],
				required: true
			},
			maxTotalSize: {
				type: Number,
				default: 50 * 1024 * 1024 // 默认50MB
			},
			// 新增：已选文件列表
			selectedFiles: {
				type: Array,
				default: () => []
			},
		},
		data() {
			return {
				uploading: false,
				allowedExtensions: ['jpg', 'jpeg', 'png', 'gif', 'pdf', 'doc', 'docx', 'xls', 'xlsx', 'txt','zip'],
				maxSingleSize: 10 * 1024 * 1024, // 10MB
			}
		},
		methods: {
			// 计算已选文件总大小
			calculateTotalSize() {
				return this.selectedFiles.reduce((total, file) => {
					return total + (file.fileRealSize || 0)
				}, 0)
			},
			// 点击上传文件
			selectFile() {
				// 上传前检查总大小
				const newFilesTotalSize = this.calculateTotalSize()
				if (newFilesTotalSize > this.maxTotalSize) {
					this.showToast(`文件总大小不能超过${this.formatFileSize(this.maxTotalSize)}`, 'none')
					return
				}
				const input = document.createElement('input')
				input.type = 'file'
				input.multiple = true
				input.onchange = (e) => {
					const files = Array.from(e.target.files || [])
					this.processFiles(files)
				}
				input.click()
			},
			//文件上传中处理
			async processFiles(files) {
				if (!files || files.length === 0) return
				if (!this.validateFiles(files)) return
				try {
					this.showLoading()
					const uploadResults = await Promise.allSettled(
						files.map(file => this.uploadFile(file))
					)
					// 过滤出真正成功的文件（既有fulfilled状态又有有效response）
					const successFiles = uploadResults
						.filter(result => {
							return result.status === 'fulfilled' &&
								result.value &&
								result.value.response
						})
						.map(result => result.value)
					const errorCount = uploadResults.length - successFiles.length
					// 显示上传结果
					this.showUploadResult(successFiles.length, errorCount)
					// 只有真正成功的文件才触发事件
					if (successFiles.length > 0) {
						this.$emit('upload-success', successFiles)
					} else {
						// 如果没有任何文件真正成功，显示错误提示
						this.showToast('所有文件上传失败，请检查后重试', 'none')
					}
				} catch (error) {
					console.error('上传过程出错:', error)
					this.showToast('上传过程出错', 'none')
				} finally {
					this.hideLoading()
				}
			},
			//判断文件类型是否符合上传要求，单个文件不能超过10M
			validateFiles(files) {
				for (const file of files) {
					const ext = this.getFileExtension(file.name)
					if (!this.allowedExtensions.includes(ext)) {
						this.showToast(`不支持的文件类型: ${ext}`, 'none')
						return false
					}
					if (file.size > this.maxSingleSize) {
						this.showToast(`文件大小不能超过${this.formatFileSize(this.maxSingleSize)}`, 'none')
						return false
					}
				}
				return true
			},
			//文件接口上传
			uploadFile(file) {
				return new Promise((resolve, reject) => {
					const formData = new FormData()
					formData.append('files', file)
					fetch(this.getUploadUrl(), {
							method: 'POST',
							headers: {
								'ECWEB-JWTSSO-TOKEN': this.getToken()
							},
							body: formData
						})
						.then(response => response.json())
						.then(data => {
							if (data?.data?.[0]) {
								resolve({
									originalFile: file,
									response: data.data[0]
								})
							} else {
								reject(new Error('无效的响应数据'))
							}
						})
						.catch(reject)
				})
			},
			// 获取上传接口地址
			getUploadUrl() {
				return `${getRequestUrl()}/app/workflow/business_attach/upload/${this.uploadType}/${this.businessId}`
			},
			// 获取token
			getToken() {
				return localStorage.getItem('token') || ''
			},
			//截取文件后缀名
			getFileExtension(filename) {
				return filename.split('.').pop().toLowerCase()
			},
			//计算文件大小
			formatFileSize(bytes) {
				if (bytes === 0) return '0 Bytes'
				const k = 1024
				const sizes = ['Bytes', 'KB', 'MB', 'GB']
				const i = Math.floor(Math.log(bytes) / Math.log(k))
				return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i]
			},
			//全屏上传中动画效果开启
			showLoading(title) {
				this.uploading = true
			},
			//全屏上传中动画效果关闭
			hideLoading() {
				// 隐藏加载效果
				this.uploading = false
			},
			// 普通通知
			showToast(title, icon) {
				// 可以替换为自定义通知效果
				uni.showToast({
					title: title,
					icon: 'none'
				});
			},
			//上传结果通知
			showUploadResult(successCount, errorCount) {
				const msg = errorCount > 0 ?
					`上传完成，${successCount}成功，${errorCount}失败` :
					'全部文件上传成功'
				this.showToast(msg, errorCount > 0 ? 'none' : 'success')
			}
		}
	}
</script>

<style scoped>
	.file-uploader button {
		padding: 8px 16px;
		background: #409eff;
		color: white;
		border: none;
		border-radius: 4px;
		cursor: pointer;
	}
</style>